<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
    
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>万岁1709B-CMS</title>

<link href="/resource/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="/resource/js/jquery-3.2.1/jquery.js"></script>
<script type="text/javascript" src="/resource/js/jquery.validate.js"></script>
<script type="text/javascript" src="/resource/js/jqueryvalidate/localization/messages_zh.js"></script>
<script type="text/javascript" src="/resource/bootstrap-4.3.1/js/bootstrap.js"></script>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark justify-content-end">
  <a class="navbar-brand" href="#"><img alt="logo"  width="40px" height="40px" src="/resource/images/logo.png">  </a>
  
  

  <!-- <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent"> -->
  <div class="collapse navbar-collapse justify-content-end"  id="navbarSupportedContent">
    
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form> 
  
    
    
    <ul class="navbar-nav " style="margin-left:40%">
      <li class="nav-item active">
        <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
      </li>
     
     <c:choose>	
     	
      <c:when test="${empty sessionScope.userkey}">
	      <li class="nav-item">
	        <a class="nav-link" href="/user/login">登录</a>
	      </li>
     </c:when>
     
      <c:otherwise>
      	<!-- 已经登陆显示登陆的个人内容 -->
	      <li class="nav-item dropdown">
	        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	          		个人中心
	        </a>
	        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
	          <a class="dropdown-item" href="#">修改头像</a>
	          <a class="dropdown-item" href="#">个人设置</a>
	          <div class="dropdown-divider"></div>
	          <a class="dropdown-item" href="/user/logout">登出</a>
	        </div>
	      </li>
      </c:otherwise>
      
      </c:choose>
      
    </ul> 
  </div>
</nav>

<!-- zhongjian bufen  -->
<div class="container-fluid" style="margin-top:20px;margin-bottom:50x;">
	<div class="row">
		<!-- 菜单 -->
		<div class="col-md-2">
			  <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
		      	<a class="nav-link active" style="text-algin:right" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">全部</a>
		      	
		      	<c:forEach items="${channels}" var="channel">
		      		<a class="nav-link" id="v-pills-profile-tab" href="channel?channelId=${channel.id}" role="tab" aria-controls="v-pills-profile" aria-selected="false">${channel.name}</a>
		      	</c:forEach>
		      </div>
		</div>
		<!-- 文章列表  轮播图等内容 -->
		<div class="col-md-6">
			<!-- 轮播图 -->
			<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
			  <ol class="carousel-indicators">
			    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
			    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
			    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
			  </ol>
			  <div class="carousel-inner">
			    <div class="carousel-item active">
			      <img src="/resource/images/1.jpg" class="d-block w-100" width="400px" height="300px" alt="...">
			      <div class="carousel-caption d-none d-md-block">
			        <h5>First slide label</h5>
			        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
			      </div>
			    </div>
			    <div class="carousel-item">
			      <img src="/resource/images/3.jpg" class="d-block w-100" width="400px" height="300px" alt="...">
			      <div class="carousel-caption d-none d-md-block">
			        <h5>Second slide label</h5>
			        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			      </div>
			    </div>
			    <div class="carousel-item">
			      <img src="/resource/images/default_avatar.png" width="400px" height="300px" class="d-block w-100" alt="...">
			      <div class="carousel-caption d-none d-md-block">
			        <h5>Third slide label</h5>
			        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
			      </div>
			    </div>
			  </div>
			  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
			    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
			    <span class="sr-only">Previous</span>
			  </a>
			  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
			    <span class="carousel-control-next-icon" aria-hidden="true"></span>
			    <span class="sr-only">Next</span>
			  </a>
			</div>
			
			<!-- 文章列表 -->
			<div class="container" style="margin-top:10px">
				<c:forEach items="${articlePage.list}" var="article">
					<div class="row" style="border-bottom:solid 1px grey;margin-top:5px">
						 <!-- 左侧的图片 -->
						<div class="col-md-2"><img alt="" src="/pic/${article.picture}" onerror="javascript:this.src='/resource/images/3.jpg'" width="70px" height="70px"></div>
						<div class="col-md-9">
							<h5><a href="/article/detail?id=${article.id}" target="_blank">${article.title}</a> </h5>
						     栏目：${article.channel.name} &nbsp; &nbsp;栏目：${article.category.name}  &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;
						      ${article.author.username}  发表于 ${article.created} 
						 </div>
					</div>
				</c:forEach>
			</div>
			<!-- 分页开始 -->
			<nav aria-label="Page navigation example">
				  <ul class="pagination">
				    <li class="page-item"><a class="page-link" href="/index">首页</a></li>
				    
				    <c:forEach begin="${articlePage.pageNum-2>1?articlePage.pageNum-2:1}" 
				        end="${articlePage.pageNum+2>articlePage.pages?articlePage.pages:articlePage.pageNum+2}" var="page" step="1"> 
				    		<c:if test="${page==articlePage.pageNum}">
				    			<li class="page-item"><a class="page-link" href="javascript:void()"><font color="red">${page} </font>  </a></li>
				    		</c:if>
				    		<c:if test="${page!=articlePage.pageNum}">
				    			<li class="page-item"><a class="page-link" href="/index?page=${page}">${page}</a></li>
				    		</c:if>
				     </c:forEach> 
				    <li class="page-item"><a class="page-link" href="index?page=${articlePage.pages}">尾页</a></li>
				  </ul>
				</nav>
			<!-- 分页结束 -->
			
			

		
		</div>
		
		<!-- 右侧内容 -->
		<div class="col-md-3">
			<!-- 最新文章 -->
			<div class="card text-center">
				  <div class="card-header">
				    最新文章
				  </div>
				  <div class="card-body">
				    <p class="card-text" align="left">
				    	<ol>
				    	<c:forEach items="${lastArticles}" var="article">
				    		<li style="align:left"><a href="/article/detail?id=${article.id}" target="_blank">${article.title}</a>
				    		</li>
				    	</c:forEach>
				    	</ol>
				    </p>
				  </div>
				  
				</div>
				
				<br>
				<br>
				
			 <!-- 最新注册用户 -->
			 <div class="card text-center">
				  <div class="card-header">
				    最新注册用户
				  </div>
				  <div class="card-body">
				    <h5 class="card-title">Special title treatment</h5>
				    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
				    <a href="#" class="btn btn-primary">Go somewhere</a>
				  </div>
				  <div class="card-footer text-muted">
				    2 days ago
				  </div>
				</div>
				
				<br>
				<br>
				
			 <!-- 奥运新闻 -->
			 <div class="card text-center">
				  <div class="card-header">
				    最新注册用户
				  </div>
				  <div class="card-body">
				    <h5 class="card-title">Special title treatment</h5>
				    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
				    <a href="#" class="btn btn-primary">Go somewhere</a>
				  </div>
				  <div class="card-footer text-muted">
				    2 days ago
				  </div>
				</div>
				
				<br>
				<br>
				
				<!-- 友情链接 -->
			 <div class="card text-center">
				  <div class="card-header">
				    友情链接
				  </div>
				  <div class="card-body">
				    <h5 class="card-title">Special title treatment</h5>
				    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
				    <a href="#" class="btn btn-primary">Go somewhere</a>
				  </div>
				  <div class="card-footer text-muted">
				    2 days ago
				  </div>
				</div>
		
			
		</div>
		
		
	</div>
</div>


<nav class="navbar navbar-expand-lg navbar-dark bg-dark   fixed-bottom" style="margin-bottom:40px">
	 <div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
	<c:forEach items="${pageLink.list}" var="link">
  	 	<a href="${link.url}" target="_blank">${link.name}</a> &nbsp;&nbsp;&nbsp;
  	 </c:forEach> 
  	 </div>
</nav>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark   fixed-bottom">
  <div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
  
  	<br>
  	 <font color="#FFFFFF">版权所有   违者必究  </font> 
  </div>
</nav>

	
</body>
</html>